<div id="tablewrapper">
  <div id="tableheader">
      <div class="search">
          <select onchange="sorters.finds('querys')" id="columnst">
              <option value="-1">Search by All Columns</option>
              <option value="0">N&deg;</option>
              <option value="1">IPV4</option>
              <option value="2">CustomerID</option>
              <option value="3">CustomerName</option>
              <option value="4">ProductCode</option>
              <option value="5">ProductName</option>
          </select>
          <input type="text" id="querys" onkeyup="sorters.finds('querys')" />
      </div>
      <span class="details">
          <div>Records: <span id="startrecordt"></span>-<span id="endrecordt"></span> of <span id="totalrecordst"></span></div>
          <div><a href="javascript:sorters.reset()" style="display:none;">reset</a></div>
      </span>
  </div>
<table cellpadding="0" cellspacing="0" border="0" id="listTable_acctest" class="tinytable">
<thead>
    <tr>
        <th axis="string">Id</th>
        <th axis="string">Cat ID</th>
        <th axis="string">Product Name</th>
        <th axis="string">Price</th>
        <th axis="string">Description</th>
        <th axis="string">Image</th>
        <th axis="string">Option</th>
	</tr>
</thead>

<tbody>	
    <?=$data?>
</tbody>
</table>
<div id="tablefooter">
      <div id="tablenav">
            <div>
                Pages: <?php echo $pages;?>
            </div>
            <div>
                <select id="paginationt" style="width:50px;"></select>
            </div>
            <div>
                <a href="javascript:sorters.showall()">view all</a>
            </div>
        </div>
        <div id="tablelocation">
            <div>
                <span style="float:left;margin-right:5px;">Number record view : </span>
                <span style="float:left">
                <select onchange="sorters.size(this.value)">
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="25" selected="selected">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                </span>
            </div>
            <div class="page">Page <span id="currentpaget"></span> of <span id="totalpagest"></span></div>
        </div>
    </div>
</div>
<script type="text/javascript">
	var sorters = new TINY.table.sorter('sorters','listTable_acctest',{
		headclass:'head',
		ascclass:'asc',
		descclass:'desc',
		evenclass:'evenrow',
		oddclass:'oddrow',
		evenselclass:'evenselected',
		oddselclass:'oddselected',
		paginate:true,
		size:25,
		colddid:'columnst',
		currentid:'currentpaget',
		totalid:'totalpagest',
		startingrecid:'startrecordt',
		endingrecid:'endrecordt',
		totalrecid:'totalrecordst',
		hoverid:'selectedrow',
		pageddid:'paginationt',
		navid:'tablenav',
		sortcolumn:null,
		sortdir:null,
		init:true
	});
</script>
<script type="text/javascript">
	ipManager = new ION.ItemManager(
	{
		container: 'listTable_acctest',
		element: 	'gallery_info'
	});
	
	
	/**
	 *  IP Information
	 *
	 */
	$$('.paginationt li').each(function(item)
	{
		item.addEvent('click', function(e)
		{
			e.stop();
			this.setAttribute('style','font-weight:bold;color:#f00;');
		});
	});
	/**
	 * Sortable on the current list table
	 *
	 */
	new SortableTable('listTable_acctest',{sortOn: 0, sortBy: 'ASC'});
		
</script>
